<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>省市区三级联动</title>
	<script src="jquery-3.2.1.min.js"></script>
	<script src="pcas-location.js"></script>
	<style>
		#CnCity{
			width:280px;position:relative;
			border: 1px solid #ccc;font-size: 12px;padding: 4px 8px;
	    outline: 0;box-sizing:border-box;cursor: pointer;
		}
		.city-title{
			width:100%;white-space: nowrap;overflow: hidden;
			text-overflow: ellipsis;color:#ccc;
		}
		.city-component{
			width:100%;position:absolute;top:26px;left:0px;
			display:none;z-index:999;
		}
		.city-select-tab{
   		border-right: 1px solid #ccc;
    	border-top: 1px solid #ccc;
    	width: 100%;height: 35px;
      background: #f0f0f0;box-sizing:border-box;
      display:flex;
		}
		.city-select-tab a{
			text-decoration: none;color: #333;
			flex-grow:1;text-align: center;line-height: 33px;
			border-left: 1px solid #ccc;border-bottom: 1px solid #ccc;
		}
		.city-select-tab a.current{
			background: #fff;border-bottom: 1px solid #fff;color: #f60;
		}
		.city-select-content{
			width:100%;
		}
		.city-select{
			border: 1px #ccc solid;border-top: 0;
    	padding: 10px 15px;box-sizing:border-box;
    	width: 100%;background: #fff;font-size: 12px;
		}
		.city-select a{
			text-decoration: none;color: #333;
			display: inline-block; padding: 5px 10px;
    	outline: 0;margin-top:5px;
		}
		.city-select a.current{
			background-color: #f60;color: #fff;border-radius: 2px;
		}
  </style>
</head>
<body>
	
	<div id="CnCity">
		<!-- 地区结果框 -->
		<div class="city-title">请选择省市区</div>
		<!-- 地区四级联动选择 -->
		<div class="city-component">
			<!-- 省份/城市/县区/街道 -->
			<div class="city-select-tab">
				<a href="javascript:;" class="current" id="province">省份</a>
				<a href="javascript:;" class="" id="city">城市</a>
				<a href="javascript:;" class="" id="area">县区</a>
				<a href="javascript:;" class="" id="street">街道</a>
			</div>
			<!-- 选择面板 -->
			<div class="city-select-content">
				<div class="city-select city-province">
					
				</div>
				<div class="city-select city-city" style="display:none;">
					
				</div>
				<div class="city-select city-area" style="display:none;">
					
				</div>
				<div class="city-select city-street" style="display:none;">
					
				</div>
			</div>
		</div>
	</div>

<script>
	let China = new Location();
	let ChinaData = China.citys; //中华人民共和国城市数据

	let citys; //选中省份后获得下面的所有地级市数据
	let areas; //选中地级市后获得下面的所有县级市数据
	let streets; //选中县级市后获得下面的所有街镇数据

	let address = Array(4); //四个长度的数组，存放地址选择的结果

	let isShow = true;

	/*根据code和子级全部数据,获得选中的完整数据*/
	function getData(str,arr){
		let data;
		arr.forEach(function(e,i,arr){
			if(e.name == str){
				data = e;
			}
		});
		return data;
	}
	/*查找对象中是否有children属性*/
	function findChildren(obj){
		for(var name in obj){
			if(obj.hasOwnProperty("children")){
				return true;
			}else{
				return false;
			}
		}
	}
	/*根据父级数据加载对应的子级数据*/
	function loadHtml(obj){
		let str = "";
		let data = obj.children;
		obj.children.forEach(function(e,i,arr){
				//console.log(e);	
			str += `
					<a title="${e.name}" code="${e.code}" href="javascript:;" class="">${e.name}</a>
			       `;
		});
		return {"html":str , "data":data};
	}

	/*1. 默认加载省份数据*/
	function loadProvince(arr){
		let str = "";
		arr.forEach(function(e,i,arr){
			str += ` 
			      <a title="${e.name}" code="${e.code}" href="javascript:;" class="province(event)" >${e.name}</a>
			       `;
		})
		$(".city-province").append(str);
	}
	loadProvince(ChinaData);

	/*2. 选择省份事件*/
	$(".city-province").on("click","a",function(){
		/*点击颜色变化*/
  	$(".city-province a").removeClass("current");
  	$(this).addClass("current");

  	/*2.1 获取省份value*/
  	let value = $(this).attr("title");
  		//console.log(value);

  	//将选中的地址存放到数组中	
  	//先清空数组
  	address.forEach(function(e,i,arr){
  		delete address[i];
  	});
  	address[0] = value;loadAddress(address);

  	let provinceSelect = getData(value,ChinaData); //获取选中的省份的全部数据
			//console.log(provinceSelect);
		/*2.2 判断是否有children属性*/
		if(findChildren(provinceSelect)){

				$(".city-select").css("display","none");$(".city-city").css("display","block");
				$(".city-select-tab a").removeClass("current");$("#city").addClass("current");

			$(".city-city").empty();
			$(".city-city").append(loadHtml(provinceSelect).html);

			citys = loadHtml(provinceSelect).data;  //获得子级全部数据
			  //console.log(citys);
		}else{
			$(".city-component").slideUp();isShow = true;
		}
	});
	
	/*3. 选择地级市事件*/
	$(".city-city").on("click","a",function(){
		/*点击颜色变化*/
  	$(".city-city a").removeClass("current");
  	$(this).addClass("current");

  	/*3.1 获取地级市title*/
  	let value = $(this).attr("title");
  	  //console.log(value);

  	address[1] = value;loadAddress(address); 

  	let citySelect = getData(value,citys); //获取选中的地级市的全部数据
  		//console.log(citySelect);

  	/*3.2 判断是否有children属性*/	
  	if(findChildren(citySelect)){
  			$(".city-select").css("display","none");$(".city-area").css("display","block");
				$(".city-select-tab a").removeClass("current");$("#area").addClass("current");

			$(".city-area").empty();
			$(".city-area").append(loadHtml(citySelect).html);	

			areas = loadHtml(citySelect).data; //获得子级全部数据
				console.log(areas);
  	}else{
  		$(".city-component").slideUp();isShow = true;
  	}
	});

	/*4. 选择县级市*/
	$(".city-area").on("click","a",function(){
		/*点击颜色变化*/
  	$(".city-area a").removeClass("current");
  	$(this).addClass("current");

  	/*4.1 获取县级市title*/
  	let value = $(this).attr("title");
  	  //console.log(value);

  	address[2] = value;loadAddress(address); 

  	let areaSelect = getData(value,areas); //获取选中的县级市的全部数据
  		//console.log(areaSelect);

  	/*4.2 判断是否有children属性*/	
		if(findChildren(areaSelect)){
  			$(".city-select").css("display","none");$(".city-street").css("display","block");
				$(".city-select-tab a").removeClass("current");$("#street").addClass("current");

			$(".city-street").empty();
			$(".city-street").append(loadHtml(areaSelect).html);	

			streets = loadHtml(areaSelect).data; //获得子级全部数据
				console.log(streets);
  	}else{
  		$(".city-component").slideUp();isShow = true;
  	}
	});

	/*5. 选择街道*/
	$(".city-street").on("click","a",function(){
		/*点击颜色变化*/
  	$(".city-street a").removeClass("current");
  	$(this).addClass("current");

  	/*4.1 获取县级市title*/
  	let value = $(this).attr("title");
  		console.log(value);

  	address[3] = value;loadAddress(address);

  	$(".city-component").slideUp();isShow = true;
	});

	/*将选取的结果加载到页面上*/
	function loadAddress(arr){
		let result = arr[0];
		//判断后面是否为空，为空就不显示"-"
		arr.forEach(function(e,i,arr){
			if(i>0){
				if(e != undefined){
					result += "-";
					result += e;
				}
			}
		});
		$(".city-title").html(result);
		$(".city-title").css("color","#000");
	}

	/*city-select-tab点击事件*/
	$(".city-select-tab a").each(function(i){
		$(this).on("click",function(){
			$(".city-select-tab a").removeClass("current");
			$(this).addClass("current");
			$(".city-select").css("display","none");
			$(".city-select-content .city-select").eq(i).css("display","block");
		})
	});
	/*city-title点击事件*/
	$(".city-title").click(function(){
		if(isShow){
			$(".city-component").slideDown();
			isShow = false;
		}else{
			$(".city-component").slideUp();
			isShow = true;
		}
	});


</script>
</body>
</html>